<template>
	<view>
		<view class="box">

			<view class="area_1">
				<view class="df fw mt-16 ml-24">
					<!-- current -->
					<view v-for="item in data.menu" 
					:key="item.menu_id"
					@click="seelctItem = item"
					 :class="{current:seelctItem.menu_id == item.menu_id}"
					class="label_item ">
					{{item.title}}
					</view>
				</view>
			</view>

			<view class="mt20 area_2">
				<view class="flex_box aic">
					<view class="item ov">
						<view class="box_sy_1">
							<view class="flex_box aic">
								<view class="item ov">
									<input type="text" class="ipt_01" 
									v-model="sns"
									placeholder-style="color: #ccc;"
										placeholder="输入IMEI或序列号" />
										</view>
								<image
								@click="sao()"
									src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_saoyisao.png"
									class="ml10 img1"></image>
							</view>
						</view>
					</view>
					<view @click="searchEnv()" class="ml20 cao_zuo_btn_3">查询</view>
				</view>
				<view class="mt20 fs24 cor_999" v-show="seelctItem.free_strategy != 4">
					<text>{{seelctItem.title}}～今日剩余</text>
					<text class="cor_FBA">免费</text>
					<text class="ml10 mr10 cor_FBA">{{seelctItem.free_num}}</text><text
						class="cor_FBA">次</text>
					<text>~单次查询消耗积分</text><text class="ml10 mr10 cor_FBA">{{seelctItem.price}}</text>
				</view>
				<view class="mt20 fs24 cor_999" v-show="seelctItem.free_strategy == 4">
					<text>{{seelctItem.title}}～</text>
					<text class="cor_FBA">不限次免费查询</text>
				</view>
				<view class="mt15 flex_box jcsb">
						<view @click="tonewDetail(data.imei_id)" class="pt10 fs24 fwb cor_FB4">IMEI或者序列号是什么？</view>
						<view @click="tonewDetail(data.bx_id)" class="pt10 fs24 fwb cor_FB4">苹果高级保修是什么？</view>
				</view>
			</view>

 <view class="pa30" v-show="resData.length > 0">
        
        <view class="pt45 pb40 flex_box aic">
          <view class="item"><view class="fs32 fwb">查询结果</view></view>
          <view class="fs24 cor_999">长按结果复制</view>
        </view>
        
        <view class="area_1">
          <view class="flex_box h48 aic mb15" v-for="(item,index) in resData" :key="index">
            <view class="w160 fs28 fwb">{{item.key}}：</view>
            <view class="item"><view class="fs28">{{item.value}}</view></view>
          </view>
          
        </view>
        
      </view>

			<view class="mt20 area_3">
				<view class="pt25 pb25 bb1">
					<view class="flex_box aic" >
						<view class="item">
							<view class="fs28 fwb">我的积分：
							<text class="cor_FBA">{{data.my_integral}}</text>
							积分</view>
						</view>
						<view @click="toJf()" class="ml15 cao_zuo_btn_2">获取积分</view>
					</view>
				</view>
				<view class="pt25 pb25 bb1" >
					<view class="flex_box aic">
						<view class="item">
							<view class="fs28 fwb">我的查询的历史</view>
						</view>
						<view @click="toList()" class="ml15 cao_zuo_btn_2">查看</view>
					</view>
				</view>
			</view>

		</view><!-- box -->
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
	import { getToken } from '@/utils/auth'
	import { reactive, ref } from 'vue'
	import { indexApi ,search} from '@/api/idsearch'

	const data = reactive({
		menu:[],
		my_integral:0,
		imei_id:0,
		bx_id:0,
	})
	
	const sns = ref("")
	
	const seelctItem = ref({
		free_num:0,
		menu_id:0,
		price:0,
		title:'',
		free_strategy:1,
	});
	const resData = ref([]);

	const tonewDetail = (id:any) => {
		uni.navigateTo({
			url:`/pages/news_detail/news_detail?id=${id}`
		})
	}
	const toJf = () => {
		uni.navigateTo({
			url:'/packages/jifen_wallet/jifen_wallet',
		})
	}
	const toList  = () => {
		uni.navigateTo({
			url:'/pages/idsearch/search_res',
		})
	}

	onShow(() => {
		getInfo();
	})
	
	const sao = () => {
		uni.scanCode({
		    success: res => {
				sns.value = res.result;
				searchEnv();
		        // console.log(res.result)
		    }
		})
	}
	
	//查询信息
	const searchEnv = async () => {
		resData.value = [];
		let res = await search({id:seelctItem.value.menu_id,sns:sns.value});
		resData.value = res.res;
		getInfo();
	}
	
	
	//获取信息
	const getInfo = async () => {
		let res = await indexApi({});
		data.my_integral = res.my_integral;
		data.bx_id = res.bx_id;
		data.menu = res.menu;
		data.imei_id = res.imei_id;
		if(seelctItem.value.menu_id == 0){
			seelctItem.value = res.menu[0];
		}
	}
</script>

<style>
	page {
		background: #FAFAFA;
	}

	.box_sy_1 {
		position: relative;
		padding: 0 24rpx;
		background: #FAFAFA;
		border-radius: 8rpx;
	}

	.area_1 {
		position: relative;
		background: #fff;
		padding: 30rpx 24rpx;
	}

	.area_2 {
		position: relative;
		padding: 24rpx;
		background: #fff;
	}

	.area_3 {
		position: relative;
		padding: 0 24rpx;
		background: #fff;
	}

	.label_item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 218rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #999;
		background: #FAFAFA;
		border: 2rpx solid #FAFAFA;
		border-radius: 8rpx;
		margin-left: 24rpx;
		margin-top: 16rpx;
	}

	.current.label_item {
		color: #FF4907;
		background: #fff;
		border-color: #FF4907;
	}

	.cao_zuo_btn_1,
	.cao_zuo_btn_2,
	.cao_zuo_btn_3 {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		height: 72rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.cao_zuo_btn_1 {
		color: #333;
		background-color: #fff;
		border: 2rpx solid #ccc;
	}

	.cao_zuo_btn_2 {
		color: #FF4907;
		background-color: #fff;
		border: 2rpx solid #FF4907;
	}

	.cao_zuo_btn_3 {
		color: #fff;
		background-color: #FF4907;
		border: 2rpx solid #FF4907;
	}

	.ipt_01 {
		display: inline-block;
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		text-align: left;
		padding: 0;
		font-size: 28rpx;
		color: #333;
		background: transparent;
		border: 0;
		border-radius: 0;
		outline: none;
	}

	.ml-24 {
		margin-left: -24rpx;
	}

	.mt-16 {
		margin-top: -16rpx;
	}

	.img1 {
		width: 40rpx;
		height: 40rpx;
	}

	.cor_FBA {
		color: #FBAA3B;
	}

	.cor_FB4 {
		color: #FB4E3B;
	}
</style>